<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>快快车管家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;list-style: none}
        .am-list-item-desced{ padding-bottom:0; }
        .am-list{margin-bottom: 0;}
        .am-list h2,.am-list p{font-size: 1.2rem;line-height: 1.8rem;}
        .margin-top10{margin-top: 10px;}
        section#kuaikuai-tab .am-tabs-bd .am-tab-panel{background-color: #eee}
        .content-btn{padding:5px 0}
        .navList{display: flex;padding: 10px 0;}
        hr{margin: 0;}
        i.iconN{width:20px;height:20px;margin-right:5px;display:inline-block;vertical-align: middle;width:20px;height:20px;margin-right:5px;background-size:100% 100%;display:inline-block;vertical-align: middle;}
        i.addr{background:url("../assets/i/icon/address.png") no-repeat;background-size:100% 100%;}
        i.timer{background:url("../assets/i/icon/time.png") no-repeat;background-size:100% 100%;}
        .am-list-item-thumbed{padding-top: 0;}
        [class*=am-u-]{padding-left:0;padding-right: 0;}
        .green{font-weight: normal;color: #029d3a !important}
        .content-btn button{width: 35%;height: 30px; line-height: 30px;margin: 5px 0;color: #a6a6a6;background-color: #FFFFFF;}
        .xiangxi{width: 25% !important;}
        .am-btn{font-size: 1.4rem;}
    </style>
</head>
<body>
<section id="kuaikuai-tab">
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav tabs-nav am-cf" style="padding: 0 50px;">
            <li class="am-active">
                <a data-kuai-tabs="0">服务订单</a>
            </li>
            <li class="">
                <a data-kuai-tabs="1">套餐订单</a>
            </li>
        </ul>

        <div class="am-tabs-bd" id="ok" style="border: 1px solid #d2d2d2;">
            <!-- 服务订单 -->
            <div class="am-tab-panel am-active" data="tab1">
                <ul class="am-list">
                    <li class="am-g margin-top10 am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="padding: 0 15px;background-color: #fff">
                            <section class="navList clearfix">
                                <aside class="am-u-sm-3 am-list-thumb no-right-p">
                                    <img src="../assets/i/examples/123.png" style="border-radius: 8px;" alt="" />
                                </aside>
                                <section class="am-u-sm-9 am-list-main">
                                    <p class="am-text-sm" style="color: #000">姓名：陈光&nbsp;&nbsp;工号: SZ0001<span class="am-fr green">等待确认</span></p>
                                    <p class="am-text-sm">驾龄：7年</p>
                                    <p class="am-text-sm">电话：15600153257</p>
                                </section>
                            </section>
                            <hr />
                            <section class="navList clearfix">
                                <ul>
                                    <li style="margin-bottom: 5px;"><p class="am-text-sm"><i class="iconN addr"></i>广东省深圳市南山区南海大道南段</p></li>
                                    <li><p class="am-text-sm"><i class="iconN timer"></i>2015-06-06&nbsp;&nbsp;&nbsp;&nbsp;14:30-15:00</p></li>
                                </ul>
                            </section>
                            <hr />
                            <section class="content-btn">
                                <button type="button" class="am-btn am-btn-default am-u-sm-6">取消订单</button>
                                <button type="button" class="am-btn am-btn-default am-u-sm-6 xiangxi">详情</button>
                            </section>
                        </section>
                    </li>

                    <li class="am-g margin-top10 am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="padding: 0 15px;background-color: #fff">
                            <section class="navList clearfix">
                                <aside class="am-u-sm-3 am-list-thumb no-right-p">
                                    <img src="../assets/i/examples/123.png" style="border-radius: 8px;" alt="" />
                                </aside>
                                <section class="am-u-sm-9 am-list-main">
                                    <p class="am-text-sm" style="color: #000">姓名：陈光&nbsp;&nbsp;工号: SZ0001<span class="am-fr green">服务完成</span></p>
                                    <p class="am-text-sm">驾龄：7年</p>
                                    <p class="am-text-sm">电话：15600153257</p>
                                </section>
                            </section>
                            <hr />
                            <section class="navList clearfix">
                                <ul>
                                    <li style="margin-bottom: 5px;"><p class="am-text-sm"><i class="iconN addr"></i>广东省深圳市南山区南海大道南段</p></li>
                                    <li><p class="am-text-sm"><i class="iconN timer"></i>2015-06-06&nbsp;&nbsp;&nbsp;&nbsp;14:30-15:00</p></li>
                                </ul>
                            </section>
                            <hr />
                            <section class="content-btn">
                                <p class="am-u-sm-6 am-text-sm" style="padding: 10px;">预约中</p>
                                <button type="button" class="am-btn am-fr am-btn-default am-u-sm-6 xiangxi">详情</button>
                            </section>
                        </section>
                    </li>
                </ul>
            </div>

            <!-- 套餐订单 -->
            <div class="am-tab-panel " data="tab2">
                <p>套餐订单</p>
            </div>
        </div>
    </div>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        //  tab点击切换
        $('.tabs-nav a').on('click', function() {
            $('.am-tabs-bd').css({ 'display':'block' });
            $('.am-tabs-nav > li').removeClass('am-active');
            $(this).parent().addClass('am-active');
            $('.am-tabs-bd div').removeClass('am-active');
            var tabsNum = $(this).attr('data-kuai-tabs');
            var aTabs = $('.am-tabs-bd div');
            $(aTabs[tabsNum]).addClass('am-active');
        });

        $('.pingjia').on('click', function() {
            window.location.href = "pingjia.html";
        });
    });
</script>
</body>
</html>